import React from "react";
import { CapsuleTabs, Form, Input, Button } from "antd-mobile";
import { useCountDown } from "../../hooks/Index";
import { useNavigate } from "react-router-dom";
function Index() {
  const [fn, num, isDisabled] = useCountDown();
  const onSubmit = () => {
    console.log("ok");
  };
  let why = useNavigate();
  const onFinish = (values) => {
    console.log(values);
    alert("登录成功");
    why("/home");
  };
  return (
    <div>
      <CapsuleTabs>
        <CapsuleTabs.Tab title="账号登录" key="fruits">
          <Form
            footer={
              <Button
                block
                type="submit"
                color="primary"
                size="large"
                onClick={onSubmit}
              >
                提交
              </Button>
            }
          >
            <Form.Item label="账号">
              <Input></Input>
            </Form.Item>
            <Form.Item label="密码">
              <Input></Input>
            </Form.Item>
          </Form>
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title="手机号登录" key="vegetables">
          <Form
            layout="horizontal"
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Item
              name="name"
              label="手机号"
              rules={[{ required: true, message: "手机号不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入手机号" />
            </Form.Item>

            <Form.Item
              label="短信验证码"
              extra={
                <Button fill="none" onClick={() => fn()} disabled={isDisabled}>
                  {isDisabled ? `(${num}s)后重新发送` : "发送验证码"}
                </Button>
              }
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Form>
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  );
}

export default Index;
